<template>
  <div id="appDetail">
    <div class="buttonBox">
      <el-button type="primary" v-if="$api.buttonPower(87)" @click="setOpen">编辑</el-button>
    </div>
    <el-descriptions :column="1" :colon="false" label-class-name="dialogLabel" content-class-name="content">
      <el-descriptions-item label="公众号查询入口" content-style="display: block;">
        <el-card shadow="never">
          <p v-for="(item, index) in detail.wx_cli_url" :key="index">
            <b>{{ item.title }}</b> <span>{{ item.url }}</span>
          </p>
        </el-card>
      </el-descriptions-item>
      <el-descriptions-item label="应用名称">{{ detail.name }}</el-descriptions-item>
      <el-descriptions-item label="公众号Appid">{{ detail.app_id }}</el-descriptions-item>
      <el-descriptions-item label="应用秘钥">{{ textSlice(detail.app_secret,16) }}</el-descriptions-item>

      <el-descriptions-item label="安全验证文件名">{{ detail.app_js_verify_file_name }}</el-descriptions-item>
      <el-descriptions-item label="安全验证文件内容">{{textSlice(detail.app_js_verify_file_body) }}</el-descriptions-item>

      <el-descriptions-item label="商户号">{{ detail.mch_id }}</el-descriptions-item>
      <el-descriptions-item label="商户号秘钥V3">{{ textSlice(detail.mch_api_key,16) }}</el-descriptions-item>

      <el-descriptions-item label="商户号证书号">{{ textSlice(detail.mch_ssl_sn) }}</el-descriptions-item>
      <el-descriptions-item label="商户号证书cert">{{ textSlice(detail.mch_ssl_cert) }}</el-descriptions-item>
      <el-descriptions-item label="商户号证书key">{{ textSlice(detail.mch_ssl_key) }}</el-descriptions-item>



<!--      <el-descriptions-item label="规则">{{ detail.rules }}</el-descriptions-item>-->
<!--      <el-descriptions-item label="限速">{{ detail.limit_rete }}</el-descriptions-item>-->
<!--      <el-descriptions-item label="短信接受推送地址">{{ detail.sms_receive_push_url }}</el-descriptions-item>-->
      <el-descriptions-item label="创建时间">{{ detail.create_at }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ detail.update_at }}</el-descriptions-item>
    </el-descriptions>

    <el-drawer title="应用编辑" :visible.sync="is_set" direction="rtl" size="85%" :wrapperClosable="false" :before-close="setClose" append-to-body>
        <iot-app-set v-if="is_set" :detail="detail" @close="setClose"></iot-app-set>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'WuliankaAppDetail',
  props:{
    data_id: Number,
  },
  data() {
    return {
      detail: {},
      is_set: false,
    };
  },

  mounted() {

  },
  watch:{
    data_id:{
      immediate: true, // 解决首次负值不触发的情况
      handler: function (newVal,oldVal){
        if (newVal){
          this.getDetail()
        }
      },
    }
  },

  methods: {
    textSlice(v, limit) {
      if (!limit){
        limit = 120
      }
      if (typeof v !== 'string'){
        return v
      }
      return String(v).slice(0, limit)+(v.length>limit ? '...' : '')
    },
    setOpen() {
      this.is_set = true
    },
    setClose(){
      this.is_set=false
      this.getDetail()
    },
    getDetail(){
      if (!this.data_id){
        return
      }
      this.$api.merchant.appdetail({ id: this.data_id}, res => {
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.detail = res.data
      })
    }
  },
};
</script>

<style lang="less" >
#appDetail {
  .label {
    width: 100px;
    text-align-last: justify;
    display: inline-block;
    font-weight: bold;
  }
}
</style>

<style lang="less" scoped>
.buttonBox {
  padding: 0 10px;
}

.el-descriptions {
  padding: 10px;
}
</style>